<template>
  <div class="lookJunior">
    <van-nav-bar title="查看下级" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <div class="tip">
      <div class="left"><span>共有{{form.number}}个成员</span></div>
    </div>
    <div class="main">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false"
                   @bottom-status-change="handleBottomChange" @top-status-change="handleTopChange"
                   :bottom-all-loaded="allLoaded" ref="loadmore">
        <div class="li" v-for="(item,index) in form.list" :key="index">
          <div class="left">
            <img :src="item.head_img_url" alt="">
            <div class="info">
              <span>{{item.nick_name}}</span>
              <span>推广人数：{{item.gen_number}}</span>
              <span>{{item.attention | attentionFilter}} / {{item.create_time}}</span>
            </div>
          </div>
          <div class="right" @click="lookJunior(item.merchant_id)" v-if="item.have_sub === 1">
            <span>查看下级</span>
            <img src="../../../../assets/images/ic_right.png" alt="">
          </div>
        </div>
        <div class="loadShow" v-show="allLoaded">暂无更多！</div>
        <div slot="bottom" class="mint-loadmore-bottom" v-show="!allLoaded&&topStatus!=='loading'">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">上拉加载</span>
          <span v-show="bottomStatus === 'loading'">加载中</span>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 16:21.
   */
  import {Indicator, Loadmore} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.user_id = this.$route.query.user_id;
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        topStatus: '',
        allLoaded: false,
        page_count: 10,
        page_index: 1,
        user_id: undefined,
        form: {},
        list: [],
        bottomStatus: ''
      }
    },
    computed: {},
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      /*
     * 上拉加载
     * */
      loadBottom() {
        this.page_index++;
        this.handleBottomChange("loading");//上拉时 改变状态码
        this.loadData();
      },
      /*
      * 下拉刷新
      * */
      loadTop() {
        this.page_count = 10;
        this.page_index = 1;
        this.list = [];
        this.allLoaded = false;
        this.loadData();
      },
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId),
          page_count: this.page_count,
          page_index: this.page_index,
          user_id: this.user_id,
        };
        Indicator.open('加载中...');
        this.$axios.userGeneralize(params).then(res => {
          Indicator.close();
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.form = res.data;
          res.data.list.forEach(item => {
            this.list.push(item);
          });
          if (res.data.list.length < this.page_count) {
            this.allLoaded = true;// 若数据已全部获取完毕
          }
        })
      },
      /*
      * 上拉加载
      * */
      loadBottom() {
        this.page_index++;
        this.loadData();
      },
      /*
      * 下拉刷新
      * */
      loadTop() {
        this.page_count = 10;
        this.page_index = 1;
        this.content = [];
        this.allLoaded = false;
        this.loadData();
      },
      //推广商户
      goBusiness() {
        this.$router.push({path: '/generalizeBusiness'})
      },
      /*
      * 查看下级
      * */
      lookJunior(id) {
        this.user_id = id;
        this.loadData();
      },
      //返回
      onClickLeft() {
        this.$router.go(-1)
      },
    },
    watch: {},
    filters: {
      attentionFilter(val) {
        if (val === 1) {
          return '已关注'
        } else if (val === 2) {
          return '未知'
        }
      }
    },
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .lookJunior {
    width: 100%;
    height: 100%;
    background: white;
    /*下拉刷新*/

    .van-pull-refresh, .van-pull-refresh__track {
      height: calc(100% - 46px - 0.7rem);
    }

    .tip {
      width: 100%;
      height: 0.7rem;
      background: rgba(250, 250, 250, 1);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .left {
        font-size: 0.24rem;
        color: #999999;
        margin-left: 0.36rem;
      }
    }

    .main {
      width: 100%;
      height: calc(100% - 0.7rem - 46px);
      overflow: auto;
      padding-left: 0.37rem;
      box-sizing: border-box;

      .li {
        width: 100%;
        height: 1.36rem;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .left {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          img {
            width: 0.84rem;
            height: 0.84rem;
            border-radius: 50%;
            display: block;
            margin-left: 0.12rem;
            margin-right: 0.32rem;
          }

          .info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 0.24rem;
            color: #333333;

            span:first-child {
              font-size: 0.3rem;
            }

            span:last-child {
              color: #999999;
            }
          }
        }

        .right {
          color: #999999;
          font-size: 0.2rem;
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: .10rem;
            height: 0.2rem;
            margin-left: 0.07rem;
            margin-right: 0.4rem;
          }
        }
      }
    }
  }

</style>
